<template>
    <el-card shadow="never" :body-style="{ padding: '20px' }">
        <div style="margin-bottom: 14px;">
            <el-button type="primary" @click="dialogVisible = true">添加分组改变</el-button>
        </div>
        <!-- 表格 -->

        <el-table :data="tableData.rows" style="width: 100%" 
        :header-cell-style="{
            backgroundColor: '#e5eeff', color: '#515a6e', fontWeight: 'normal'
        }">
            <el-table-column label="ID" prop="_id" />
            <el-table-column label="分组3" prop="name" width="600" />
            <el-table-column align="center" label="操作" width="200">
                <template #default="scope">
                    <el-button size="small" text type="primary" @click="handleEdit(scope.row)">
                        修改
                    </el-button>
                    <el-button size="small" text type="danger"  @click="deleteUserGrou(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page-container">
            <el-pagination :page-sizes="[5, 10, 15, 20]" 
            v-model:current-page="pageData.currentPage"
            v-model:page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
               :background="true"/>
        </div>

    </el-card>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" destroy-on-close>
        <!-- form表单 -->
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm.user" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="分组名称" prop="name">
                <el-input v-model="ruleForm.user.name" placeholder="请输入分组名称" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addUserGroup">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup lang="ts">
import { onMounted,computed, ref, watch,  } from 'vue'
import { reactive } from 'vue'
import type { FormRules } from 'element-plus'
import api from '@/api';

// 引入封装的接口文件
// 表格数据接口
interface User {
    _id: string
    name: string
}
// 表单验证接口
interface RuleForm {
    name: string
}
// 分页数据
const pageData=ref({
    currentPage: 2,
    pageSize: 10
})
// 弹窗
const dialogVisible = ref(false)
// 表单双邦的数据
let ruleForm = reactive({
    user: {
        _id: "",
        name: "",
    }
})
// 定义表单的验证规则
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入分组名', trigger: 'blur' },
    ]
})
// 表格数据
let tableData = ref({
    rows:[],
    total:0
})

// 发送请求获取数据
onMounted(() => {
    getUsersGroupData()
})
const getUsersGroupData = async () => {
    const res=await api.userGroups.search(pageData.value)
    // console.log(res);
    if (res.code == 200) {
        tableData.value.rows = res.data.rows;
        tableData.value.total = res.data.total;
    }
}
// 增加用户或者修改分组
const addUserGroup=async()=>{
    // console.log(ruleForm.user._id);
    if(ruleForm.user._id){
        const res=await api.userGroups.update(ruleForm.user)
        if(res.code==200){
            getUsersGroupData()
        }
        alert("分组修改成功")
    }else{
        const res=await api.userGroups.add({name:ruleForm.user.name})
        if(res.code==200){
            console.log(res);
            getUsersGroupData()
        }
        alert("新增分组成功")
    }
    dialogVisible.value=false
}
// 删除分组
const deleteUserGrou=async(data:any)=>{
    const res=await api.userGroups.remove({_id:data._id})
    if(res.code==200){
            console.log(res);
            getUsersGroupData()
        }
        alert("分组删除成功")
}

// 打开编辑框
const handleEdit = (item: User) => {
    // console.log(item);
    dialogVisible.value = true
    // 将当前要修改的数据回显到表单中
    ruleForm.user = { ...item }
}

const dialogTitle = computed(() => {
    if (ruleForm.user._id) {
        return '修改分组'
    }
    return '新增分组'
})
// 侦听弹窗的状态
watch(dialogVisible, () => {
    if (!dialogVisible.value) {
        ruleForm.user = { _id: '', name: '' };
    }
})

//改变分页条大小的数据
watch(pageData.value,()=>{
    getUsersGroupData(),{
        deep:true
    }
})




</script>

<style scoped>
.page-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    
}
</style>